{extend name="main"}
{block name="style"}
<style>
.theme{height: 300px;}
.theme .el-image__preview{width: 100%;height: 300px;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
 	<el-divider content-position="left">当前下载的模板</el-divider>
	<div class="row">
		<div class="col-3" v-for="(v,index) in tableData">
			<div class="shadow">
				<div class="theme">
					<el-image :src="'/getImgByPath?path='+v.theme[0].path" fit="cover" lazy :preview-src-list="getImageList(v.theme)"></el-image>
				</div>
				<div class="p-3">
					<div class="flex">
						<div class="flex-1 text-truncate">{{v.info.title}}</div>
						<div class="small text-secondary px-1">v{{v.info.version_name}}</div>
						<div class="small text-secondary">{{v.info.source}}</div>
					</div>
					<div class="flex flex-center">
						<div class="small text-secondary pr-2">支持</div>
						<div class="flex-1">
							<el-button :type="v.index?'success':'info'" :disabled="!v.index" size="minism" @click="setTheme(v,'index')">PC</el-button>
							<el-button :type="v.mobile?'success':'info'" :disabled="!v.mobile" size="minism" @click="setTheme(v,'mobile')">移动端</el-button>
							<el-button :type="v.bsadmin?'success':'info'" :disabled="!v.bsadmin" size="minism" @click="setTheme(v,'bsadmin')">后台</el-button>
							<el-button :type="v.app?'success':'info'" :disabled="!v.app" size="minism" @click="setTheme(v,'app')">下载页</el-button>
						</div>
					</div>
					<div class="flex flex-center">
						<div class="small text-secondary pr-2">当前使用</div>
						<div class="flex-1">
							<el-tag type="primary" size="mini" v-if="v.is_index">PC</el-tag>
							<el-tag type="primary" size="mini" v-if="v.is_mobile">移动端</el-tag>
							<el-tag type="primary" size="mini" v-if="v.is_bsadmin">后台</el-tag>
							<el-tag type="primary" size="mini" v-if="v.is_app">下载页</el-tag>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			search:{
				ajax:false
			},
			tableData:[],
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
			this.initHtml();
		},
	    methods: {
	    	setTheme(data,index){
	    		switch(index){
	    			case 'index':
	    				client='PC';
	    				break;
	    			case 'mobile':
	    				client='移动端';
	    				break;
	    			case 'bsadmin':
	    				client='后台';
	    				break;
	    			case 'app':
	    				client='下载页';
	    				break;
	    		}
	    		if(data[index]){
	    			if(data['is_'+index])
	    				return XYBase.msg('当前已应用'+client);
		      		var _this=this;
			        this.$confirm('是否确定将'+client+'切换为【'+data.info.title+'】?', '提示', {
			          confirmButtonText: '切换',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
			    		const loading=XYBase.openloading();
						$.ajax({
							url:'',
							type:'post',
							data:{
								filename:data.filename,
								client:index
							},
							dataType:'json',
							error:function(err){
				    			loading.close();
								XYBase.error(XYBase.config.system_network_error);
							},
							success:function(ret){
				    			loading.close();
								if (ret) {
									if (ret.code === 0) {
										if(index=='bsadmin')
		    								window.location.reload();
										_this.initHtml();
									}else{
										XYBase.msg(ret.msg);
									}
								}else{
									XYBase.error(XYBase.config.system_network_error);
								}
							}
						});
			        }).catch(() => {
						XYBase.msg('已取消');
			        });
	    		}else{
	    			XYBase.msg('当前主题不支持'+client);
	    		}
	    	},
	    	getImageList(data){
	    		var list=[];
	    		for (var i = 0; i < data.length; i++) {
	    			list.push('/getImgByPath?path='+data[i].path);
	    		}
	    		return list;
	    	},
	      	initHtml() {
	      		var _this=this;
	      		this.search.ajax=true;
				$.ajax({
					url:'',
					type:'get',
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								_this.tableData=ret.data;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			},
	    }
	});
</script>
{/block}